<template>
  <div style="background-color: #eee;">
    <div class="asheng-hot-title" style="height:auto">
      <table class="asheng-hot-title-table">
        <tr>
          <td style="width: 60px;"></td>
          <td style="font-size: 16px;color:#3c85ed;">批量套餐设置</td>
          <td style="width: 60px;color: #999;" @click="closeHot">关闭</td>
        </tr>
      </table>
      <van-cell-group>
        <van-field label-width="60px" label="标签类型">
          <template #input>
            <template v-for="(row,index) in tags" :key="'row'+index">
              <van-tag style="margin:0px 5px 5px 0px;" v-if="index === settingParent" size="large" type="primary">{{row.name}}</van-tag>
              <van-tag style="margin:0px 5px 5px 0px;" @click="clickParent(index)" v-else size="large" color="#f1f1f1" text-color="#aaa">{{row.name}}</van-tag>
            </template>
          </template>
        </van-field>
        <van-field label-width="60px" label="标签值">
          <template #input v-if="settingParent>-1">
            <template v-for="item in tags[settingParent].items" :key="item.val">
              <van-tag style="margin:0px 5px 5px 0px;" v-if="selectVal === item.val" size="large" type="primary">{{item.name}}</van-tag>
              <van-tag style="margin:0px 5px 5px 0px;" @click="tagClick(item.val)" v-else size="large" color="#f1f1f1" text-color="#aaa">{{item.name}}</van-tag>
            </template>
          </template>
        </van-field>
      </van-cell-group>
      <div class="topSelectSearch" style="margin-top:0px;border-top:1px solid #f1f1f1">
        <van-search v-model="queryPara.goodName" clearable show-action placeholder="请输入套餐名称">
          <template #action>
            <div class="search-button" @click="onClickSearch">搜索</div>
          </template>
        </van-search>
      </div>
    </div>
    <div style="height: 201px;width: 100%;"></div>
    <!-- <div style="font-size: 14px;width:94%;margin-left: 3%;color: red;margin-bottom: -10px;">*点击产品LOGO或名称，完成热门产品添加和移除。
        </div> -->
    <div class="asheng-good-list" v-if="goodArray != null && goodArray.length > 0">
      <template v-for="(item, index) in goodArray" v-bind:key="item.id">
        <div class="asheng-good-list-item" v-if="isTag(item.tags)">
          <div style="display: flex;widht:100%">
            <!-- <div  style="width:20px;" class="asheng-hot-icon"></div> -->
            <div style="width:calc(100% - 100px);"><van-icon name="fire" color="white" style="margin-right: 3px;color:red;font-weight: bold;" />{{ item.goodName }}</div>
            <div style="width:100px;text-align:right;">
              <van-button plain hairline type="danger" size="small" style="float: right;font-size: 14px;" @click="onClickChangeHot(item, index)">取消标签</van-button>
            </div>
          </div>
        </div>
      </template>
      <template v-for="(item, index) in goodArray" v-bind:key="item.id">
        <div class="asheng-good-list-item" v-if="!isTag(item.tags)">
          <div style="display: flex;widht:100%">
            <!-- <div  style="width:20px;" class="asheng-hot-icon"></div> -->
            <div style="width:calc(100% - 100px);">{{ item.goodName }}</div>
            <div style="width:100px;text-align:right;">
              <van-button plain hairline type="primary" size="small" style="float: right;font-size: 14px;" @click="onClickChangeHot(item, index)">加入标签</van-button>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div v-else>
      <van-empty description="暂无相关数据" />
    </div>
  </div>
</template>
<script>
import { getCountHot } from '@/api/admin/setting'
import { listGoodinfo, updateTag } from '@/api/admin/goodinfo'
import { showToast } from 'vant'
export default {
  name: 'settingHotDlglog',
  components: {},
  props: {
    t1: Array,
    t2: Array,
    t3: Array,
    t4: Array,
  },
  data() {
    return {
      hotNum: 0,
      queryPara: {
        pageNum: 1,
        pageSize: 500,
        status: 100,
        goodName: '',
      },
      settingParent: -1,
      selectVal: '',
      goodArray: [],
      tags: [],
    }
  },
  created() {
    this.initCurrPageData()
    this.tags = [
      { name: '激活类型', items: this.fmTag(this.t1) },
      { name: '年龄', items: this.fmTag(this.t2) },
      { name: '月租', items: this.fmTag(this.t3) },
      { name: '特殊', items: this.fmTag(this.t4) },
    ]
  },
  methods: {
    fmTag(dict) {
      let res = []
      dict.forEach((d) => {
        let item = {
          name: d.dictLabel,
          val: d.dictValue,
          checked: false,
        }
        res.push(item)
      })
      return res
    },
    isTag(str) {
      let res = false
      if (str && this.selectVal) {
        let arr = str.split(',')
        if (arr.indexOf(this.selectVal) > -1) {
          res = true
        }
      }
      return res
    },
    clickParent(index) {
      this.settingParent = index
      this.selectVal = ''
    },
    tagClick(val) {
      this.selectVal = val
    },
    initCurrPageData() {
      listGoodinfo(this.queryPara).then((res) => {
        if (res.code === 200) {
          this.goodArray = res.rows
        }
      })

      this.countHotNum()
    },
    onClickSearch() {
      this.queryPara.pageNum = 1
      this.initCurrPageData()
    },
    closeHot() {
      this.$emit('close')
    },

    countHotNum() {
      getCountHot().then((res) => {
        if (res.code == 200) {
          this.hotNum = res.data
        }
      })
    },
    onClickChangeHot(item, index) {
      if (this.selectVal) {
        updateTag(item.id, this.selectVal).then((res) => {
          if (res.code == 200) {
            this.goodArray[index].tags = res.msg
            showToast('操作成功')
          } else {
            showToast(res.msg)
          }
        })
      } else {
        showToast('请选择标签类型和标签值')
      }
    },
  },
}
</script>
<style scoped>
.asheng-hot-title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
  text-align: center;
  position: fixed;
  width: 100%;
  background-color: white;
  border-radius: 15px 15px 0px 0px;
  overflow: hidden;
  z-index: 999999;
}

.asheng-hot-title-table {
  width: 100%;
}

.asheng-good-list {
  min-height: 200px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.asheng-good-list-item {
  width: 100%;
  padding: 10px;
  background: #fff;
  line-height: 18px;
  border-bottom: 1px solid #f1f1f1;
}

.asheng-good-list-item img {
  width: 100%;
}

.asheng-good-name {
  width: 94%;
  margin-left: 3%;
  margin-top: 3px;
  margin-bottom: 10px;
  font-size: 14px;
}

.asheng-hot-icon {
  position: absolute;
  background-color: red;
  padding: 3px 5px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0px 0px 5px 5px white;
  border-radius: 0px 10px 10px 0px;
}
/deep/ .van-search {
  background: none;
  padding: 0;
}
/deep/ .van-icon-search {
  color: #3682ffff;
}
/deep/ .van-search__action {
  color: #3682ffff;
}
/deep/ .van-field__control {
  color: #3682ffff;
}
/deep/ .van-field__control::-webkit-input-placeholder {
  color: #3682ffff;
}
</style>